<template>
  <div id="user-login">
    <user-head class="user-head">
      <span slot="user-head-center" class="login-head-center">AI FORCE</span>
    </user-head>
<user class="login-box">
  <div slot="user-content">
    <span class="user-register-title">注册你的账号</span>
    <Input placeholder="请输入用户名（4-10位）" v-model.lazy.trim="username"></Input>
    <Input placeholder="请输入十一位手机号码" v-model.lazy.trim="phone"></Input>
    <user-password ref="regpsw"/>
    <user-password ref="pswagain"/>
    </div>
    <div slot="user-commit" class="login-btn"><Button type="success" long @click="register">注册</Button></div>
    <div slot="user-cut" class="login-user-cut"><span @click="toLogin"> 登录 </span>|<span @click="toHome"> 返回首页 </span></div>
</user>
  </div>
</template>
<script>
import User from '../../../common/user/User.vue'
import UserHead from 'components/common/user/UserHead.vue'
import UserPassword from '../../../common/user/UserPassword.vue'
import {commitRegisterdata} from 'api/register.js'

export default {
  name:'UserRegister',
  data(){
    return {
      username:'',
      password:'',
      phone:'',
      pswagain:''
    }
  },
  components:{
    User,
    UserHead,
    UserPassword
  },
  mounted(){
    this.place();
      },
  methods:{
    place(){
    this.$refs.regpsw.myplaceholder='请输入6-20位密码';
    this.$refs.pswagain.myplaceholder='请再次输入6-20位密码';
    },
    toLogin(){
      this.$router.push('/login');
    },
    toHome(){
      this.$router.push('/homepage');
    },
    register(){
      this.password=this.$refs.regpsw.password;
      this.pswagain=this.$refs.pswagain.password;
      let data={};
      let testusername=/^[\u4e00-\u9fa50-9A-Za-z]{4,10}$/;
      let testpsw=/^[\u4e00-\u9fa50-9A-Za-z]{4,10}$/;
      let testphone=/^\d{11}$/;
      if(!testusername.test(this.username))
      {
        if(this.username){
        this.$Notice.warning({
          title:'用户名格式错误',
          duration:5
        })}else{
          this.$Notice.warning({
          title:'用户名不能为空',
          duration:5
        })
        }
      }else if(!testphone.test(this.phone))
      {
        if(this.phone){
        this.$Notice.warning({
          title:'电话号码格式错误',
          duration:5
        })}else{
          this.$Notice.warning({
          title:'电话号码不能为空',
          duration:5
        })
        }
      }else if(!testpsw.test(this.password))
      {
        if(this.password){
        this.$Notice.warning({
          title:'密码格式错误',
          duration:5
        })}else{
          this.$Notice.warning({
          title:'密码不能为空',
          duration:5
        })
        }
      }else if(this.pswagain!=this.password)
      {
        if(this.pswagain){
        this.$Notice.warning({
          title:'两次输入的密码不同',
          duration:5
        })}else{
          this.$Notice.warning({
          title:'请再次输入密码',
          duration:5
        })
        }
      }else
      {
        data.username=String(this.username);
        data.phone=String(this.phone);
        data.password=String(this.password);
        commitRegisterdata('api/user/register',data)
        .then(res=>{
          this.$Notice.success({
          title:'注册成功',
          duration:5
        }); this.$router.push('/login');
        })
        .catch(err=>{
          this.$Notice.error({
          title:'注册失败',
          duration:5
        })
      })
      }
  }
    }
  }
</script>
<style>
#user-login{
  width: 100%;
  height: 100vh;
  background-color: rgb(140, 48, 245);
  overflow: hidden;
}
.user-head{
  position: relative;
  top: 6.5rem;
  left: 38rem;
}
.login-box{
  margin-left: 32%;
  margin-top: 4%;
}
.ivu-input{
  font-size: 14px;
  padding: 4px 7px;
  height: 40px;
   margin-bottom: 1.8rem;
}
.ivu-input:hover{
  border-color: rgb(140, 48, 245);
}
.ivu-btn-success{
  font-size: 18px;
  background-color: rgb(140, 48, 245);
  border-color: rgb(140, 48, 245);
}
.ivu-btn-success:hover{
  background-color: rgb(140, 48, 245);
  border-color: rgb(140, 48, 245);
}
.ivu-btn-long{
  width: 88%;
}
.login-btn{
  cursor: pointer;
  width: 96%;
  color: #969BAB;
}

.login-user-cut{
  cursor: pointer;
  position: relative;
  right: -80%;
  bottom: 0.5rem;
  font-size: 14px;
  color: #969BAB;
}
.login-head-center{
  position: absolute;
  top: 35%;
  left: 30%;
}

.user-register-title{
  position: relative;
  top: -26px;
  left: 42%;
  font-size: 14px;
  color: #969BAB;
}
</style>